<template>
	<view>
		<view class="np-seckill" v-if="miaosha">
			<view class="np-seckill-price">
				<text class="np-price-xxl">{{goods.coupon_price}}</text>
				<view class="np-price-num">
					<view class="text-through">{{'原价￥' + goods.price}}</view>
					<view>{{goods.sales}}人付款</view>
				</view>
			</view>
			<view class="np-seckill-time">
				<view>限时秒杀</view>
				<view class="text-xs">距结束剩余{{timeOutInfo}}</view>
			</view>
		</view>
		<view class="np-goods-box">
			<view class="np-price-box" v-if="!miaosha">
				<text class='np-coupon-price'>{{goods.coupon_price}}</text>
				<text class='np-price'>原价:{{goods.price}}</text>
				<text class='np-sales'>{{goods.sales}}人付款</text>
			</view>
			<view class="np-title">
				<text v-for="(item,index) in goods.tags" :key="index" class="np-goods-title-tag" :class="item.color ? 'bg-' + item.color : 'bg-red'">{{item.name}}</text>
				<text class="title-pd-left">{{goods.title}}</text>
			</view>
			<view class="np-goods-shouyi" v-if="goods.money > 0">
				<text class="npIcon-shouyi"></text>
				<text>预计赚：{{goods.money}}元</text>
			</view>
			<view class="np-goods-auth-tip" v-if="goods.money > 0 && api === 'ali' && hasLogin && (!userInfo.relation_id)">
				<text>您还没有授权，无法获得佣金</text>
				<uni-tag class="tags-margin" text="马上授权" size="small" type="error" :inverted="false" :circle='true' @click="toAuth"></uni-tag>
			</view>
			<view class="np-intro" v-if="goods.intro">
				<text>{{goods.intro}}</text>
			</view>
			<goods-coupon v-if="goods.coupon_quan > 0" :goods="goods" :api="api" @click="buyNow"></goods-coupon>
		</view>
		<view class="np-shop">
			<view class="np-shop-item">
				<image class="np-shop-logo" v-if="api === 'jd'" src="/static/images/jd-icon.jpg"></image>
				<image class="np-shop-logo" v-if="api === 'pdd'" src="/static/images/pdd-icon.jpg"></image>
				<image class="np-shop-logo" v-if="api === 'ali' && goods.shop_info && goods.shop_info.pict_url" :src="goods.shop_info.pict_url"></image>
				<view v-else>
					<image class="np-shop-logo" v-if="api === 'ali' && goods.shop_type == 0" src="/static/images/tmall-icon.png"></image>
					<image class="np-shop-logo" v-if="api === 'ali' && goods.shop_type == 1" src="/static/images/taobao_icon.png"></image>
				</view>
				<text class="np-shop-name">{{goods.shop_name}}</text>
			</view>
		</view>
		
		<view class="np-list-box" v-if="recommend.length > 0">
			<view class="np-list-title">
				<text>官方推荐</text>
			</view>
			<view class="np-scroll-box">
				<scroll-view class="np-scroll" scroll-x>
					<block v-for="(item,indexs) in recommend" :key="indexs">
						<view :id="['scroll' + (indexs + 1 )]" class="np-scroll-item" @click="navTo(item)">
							<image class="np-scroll-avatar" :src="item.image"></image>
							<view class="text-cut-2 np-scroll-title">{{item.title}}</view>
							<view class="np-scroll-price">{{item.price}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<uni-popup ref="copytip" type="center" :animation="true">
			<view class="np-copy-tip">
				<view class="np-tip-header">
					<text class="np-header-icon npIcon-success"></text>
				</view>
				<view class="np-tip-title">领取成功</view>
				<view class="np-tip-text">
					<text>{{linkInfo ? linkInfo.tip : ''}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	import goodsCoupon from './goods-coupon.vue'
	export default {
		mixins: [base],
		components:{goodsCoupon},
		data() {
			return {
				miaosha: false,
				timeOutInfo: "-天--时--分--秒",
				miaosha_end_time: {
					d: "--",
					h: "--",
					m: "--",
					s: "--",
				},
				goodsList: [],
				wechat: false,
				linkInfo: false,
				pinTuanInfo: 0,
			}
		},
		props: {
			goods: {
				type: Object,
				default: () => {
					return {};
				}
			},
			api: {
				type: String,
				default: ""
			},
			recommend: {
				type: Array,
				default: ()=>{
					return [];
				}
			}
		},
		created() {
			if (this.goods.coupon_quan > 0) {
				this.setMiaoshaTimeOver();
			}

			uni.getStorage({
				key: "GUESSLIKE",
				success: (res) => {
					this.goodsList = JSON.parse(res.data);
				}
			});
			// #ifdef H5
			this.wechat = this.$config.isTencent();
			// #endif
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			navTo(item) {
				uni.navigateTo({
					url: item.to_page + '?id=' + item.itemid
				});
			},
			toAuth() {
				uni.navigateTo({
					url: "/pages/user/auth"
				});
			},
			setMiaoshaTimeOver() {
				var timestamp = Date.parse(new Date()) / 1000;
				let over_time = this.goods.coupon_end_time - timestamp;
				let nowtime = 0;

				if (over_time < 86400 * 7 && over_time > 0) {
					this.miaosha = true;
					this.timer = setInterval(() => {
						var time_over = over_time - nowtime;
						time_over = time_over < 0 ? 0 : time_over;
						nowtime++;
						this.timeOutInfo = secondToTime(time_over);
					}, 1000);
				}

				function secondToTime(second) {
					var _d = parseInt(second / 86400);
					var threeTime = second - 86400 * _d;
					var _h = parseInt(threeTime / 3600);
					var _m = parseInt((threeTime % 3600) / 60);
					var _s = threeTime % 60;
					if (_d == 0) {
						return _h + "时" + _m + "分" + _s + "秒";
					} else {
						return _d + "天" + _h + "时" + _m + "分" + _s + "秒";
					}
				}
			},
			buyNow(){
				this.$emit('click');
			},
		}
	}
</script>

<style lang="scss">
	.np-seckill{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		padding: 18.18rpx 27rpx;
		background-image: url('/static/images/aiu.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
	}
	
	.np-seckill-price{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.np-price-xxl {
		font-size: 54.54rpx;
		margin-right: 20rpx;
	}
	
	.np-price-xxl::before {
		content: "¥";
		font-size: 80%;
		margin-right: 4upx;
	}
	
	.np-price-num {
		font-size: 24rpx;
		font-weight: 200;
	}
	
	.np-seckill-time{
		display: flex;
		flex-direction: column;
		text-align: right;
	}
	
	.np-goods-box{
		display: flex;
		flex-direction: column;
		padding: 18.18rpx 27rpx;
		background: #FFFFFF;
	}
	
	.np-price-box {
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
	}
	
	.np-coupon-price {
		height: 40rpx;
		font-size: 40rpx;
		color: #FF0000;
		font-weight: bold;
	}
	
	.np-coupon-price::before {
		content: "¥";
		font-size: 80%;
		margin-right: 4upx;
	}

	.np-price {
		height: 30rpx;
		margin-left: 10rpx;
		color: #aaaaaa;
		font-size: 24rpx;
		text-decoration: line-through;
	}

	.np-sales {
		height: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		color: #aaaaaa;
		font-size: 24rpx;
	}
	
	.np-title{
		font-size: 32rpx;
		font-weight: bold;
		color: black;
	}
	
	.cu-tag {
		margin-top: -9.09rpx;
		margin-right: 9.09rpx;
	}
	
	.np-intro{
		color: #e54d42;
		background-color: #fadbd9;
		padding: 9.09rpx 18.18rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	
	.np-margin-top{
		margin-top: 10upx;
	}
	
	.np-shop{
		display: flex;
		flex-direction: row;
		padding: 18.18rpx 27rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
	}
	
	.np-shop-item{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.np-shop-logo {
		width: 80rpx;
		height: 80rpx;
	}
	
	.np-shop-name{
		margin-left: 10rpx;
	}
	
	.np-list-box {
		background-color: #FFFFFF;
	}
	
	.np-list-title{
		font-size: 28rpx;
		margin: 0 27rpx;
		padding: 18.18rpx 0;
		border-top: 2rpx solid #efebeb;
	}
	
	.np-scroll-box{
		width: 100%;
		position: relative;
	}
	
	.np-scroll{
		position: relative;
		height: 340rpx;
		white-space: nowrap;
		width: 100%;
	}
	
	.np-scroll-item{
		display: inline-block;
		padding-top: 27.27rpx;
		width: 199.99rpx;
		padding-right: 18.18rpx;
		white-space: initial;
	}
	
	.np-scroll-avatar {
		width: 181.81rpx;
		height: 181.81rpx;
	}
	
	.np-scroll-title {
		font-size: 24rpx;
		padding: 0 5rpx;
	}
	
	.np-scroll-price {
		font-size: 32rpx;
		color: #e54d42;
		padding: 10rpx 10rpx 0 10rpx;
	}
	
	.np-scroll-price::before {
		content: "¥";
		font-size: 70%;
		margin-right: 4upx;
	}
	
	.np-border-view {
		position: relative;
		background: #efebeb;
		margin: 21.81rpx 0;
		height: 2rpx;
		width: 100%;
	}
	
	.np-goods-title-tag {
		font-size: 22rpx;
		font-weight: 600;
		padding: 0 8rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 6rpx;
		margin-right: 5rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		margin-top: -6.09rpx;
	}
	
	.title-pd-left {
		padding-left: 5rpx;
	}
	
	.np-goods-shouyi {
		color: #e54d42;
		background-color: #fadbd9;
		padding: 9.09rpx 18.18rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.np-goods-auth-tip {
		background-color: #6739b6;
		color: #FFFFFF;
		padding: 9.09rpx 18.18rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.npIcon-shouyi {
		font-size: 30rpx;
		margin-right: 10rpx;
	}
</style>
